<template>
  <div>
    <div v-if="eggtrue" class="content">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="150px"
    >
      <el-form-item label="彩蛋缩略图" prop="coverUrl">
        <!-- <el-button type="primary" @click="uploadHandle()">上传文件</el-button> -->
        <img :src="dataForm.coverUrl" style="width: 60px;height: 60px;">
        <div v-if="!disabled">
          <!-- <img :src="dataForm.coverUrl" style="width: 40px;"> -->
          <el-upload
            class="upload-demo"
            :action="url"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传png文件且大小不超过250KB</div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="彩蛋简介" prop="briefIntroduction">
        <el-input v-model="dataForm.briefIntroduction" type="textarea" :rows="6" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="彩蛋期数" prop="chapterNumber">
        <el-input v-model="dataForm.chapterNumber" readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editForm"  v-if="disabled">修改</el-button>
        <el-button type="primary" v-if="disabled" @click="getList(dataForm)">彩蛋列表</el-button>
        <el-button type="primary" @click="dataFormSubmit" v-if="!disabled">确定</el-button>
        <el-button v-if="!disabled" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div v-else>
      <egg-list v-if="customInfo" ref="custom"  :id="bookId" @goBack="hideInfo"></egg-list>
    </div>
  </div>
</template>

<script>
 import EggList from './eggList'
export default {
  data() {
    return {
      steward: [{}],
      rember: "",
      messageShow: false,
      dataForm: {
        briefIntroduction:"",
        chapterNumber: "",
        coverUrl: "",
        id:''
      },
      url: "",//上传缩略图
      disabled: true,
      eggtrue:true,
      customInfo:false,
      bookId:'',
      dataRule: {
        briefIntroduction: [
          { required: true, message: "彩蛋简介不能为空", trigger: "blur" },
          { max: 54, message: "最长54个字符", trigger: "blur" }
        ],
      },
    };
  },
  mounted(){
    this.getEggs();
    this.url = this.$http.adornUrl(
      `/colorEgg/upload?token=${this.$cookie.get("token")}`
    );
  },
  components: {
      EggList
    },
  methods: {
    //上传封面
    handleAvatarSuccess(response, file, fileList) {
      this.fileList = fileList;
      this.successNum++;
      if (response && response.code === 0) {
        if (this.num === this.successNum) {
          this.$confirm("操作成功, 是否继续操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).catch(() => {
            this.visible = false;
          });
        }
        this.dataForm.coverUrl = response.url;
      } else {
        this.$message.error(response.msg);
      }
    },
    //ok
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 /1024< 3;
      if (!isJPG) {
        this.$message.error("上传封面只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传封面大小不能超过 250MB!");
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 408;
        let height = 540;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传的封面必须是408*540!");
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getEggs(){
       this.disabled = true;
        this.$http({
          url: this.$http.adornUrl(`/colorEgg/get`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
              this.dataForm.id = data.colorEgg.id;
              this.dataForm.coverUrl = data.colorEgg.coverUrl;
              this.dataForm.chapterNumber = data.colorEgg.chapterNumber;
              this.dataForm.briefIntroduction = data.colorEgg.briefIntroduction;
          }
        })
    },
   //修改
    editForm() {
      this.disabled = false;
    },
    //提交
    dataFormSubmit() {
          this.$http({
              url: this.$http.adornUrl(`/colorEgg/update`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'briefIntroduction': this.dataForm.briefIntroduction,
                'chapterNumber': this.dataForm.chapterNumber,
                'coverUrl': this.dataForm.coverUrl,
              })
            }).then(({data}) => {
                this.getEggs();
            })
    },
    //取消
    cancel(){
      this.disabled = true;
    },
    getList(dataForm){
      this.bookId=dataForm.id;
      console.log(this.bookId);
      this.eggtrue = false;
      this.customInfo = true;
    },
    hideInfo () {
        this.eggtrue = true
        this.customInfo = false
      },
  }
};
</script>
<style scoped>
.content {
  width: 50%;
  height: 550px;
  margin: 0 auto;
  border: solid 1px #ccc;
}
.el-form {
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
}
.el-row {
  display: flex;
  align-items: center;
  height: 45px;
  font-size: 16px;
}
</style>
